<template>
  <div class="nav-menu">
    <div class="logo">
      <img class="img" src="../../assets/img/logo.png" alt="" />
      <h2 class="title" v-show="!isCollapse">便利店仓储管理系统</h2>
    </div>
    <div class="menu">
      <el-menu :collapse="isCollapse" :default-active="defaultActive">
        <template v-for="item in userMenu" :key="item.id">
          <el-sub-menu :index="item.id + ''">
            <template #title>
              <el-icon>
                <component :is="item.icon.split('-icon-')[1]" />
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
            <template v-for="subitem in item.children" :key="subitem.id">
              <el-menu-item :index="subitem.id + ''" @click="handleItemClick(subitem)">
                {{ subitem.name }}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import userLoginStore from '../../store/login/index'
import { computed, ref } from 'vue'
import { firstMenu, mapPathToMenu } from '@/utils/map-menus'
import { useRoute } from 'vue-router'

defineProps({
  isCollapse: {
    type: Boolean,
    default: false,
  },
})

const loginStore = userLoginStore()
const userMenu = loginStore.userMenu.data

const handleItemClick = (e: any) => {
  console.log(e.url)
  router.push(`${e.url}`)
}

//ElMenu的默认菜单
const route = useRoute()
const defaultActive = computed(() => {
  const pathMenu = mapPathToMenu(route.path, userMenu)
  return pathMenu.id + ''
})
</script>

<style scoped>
.nav-menu {
  height: 100%;
  background-color: rgb(90, 90, 90);
}
.logo {
  display: flex;
  height: 40px;
  padding: 12px 10px 8px 10px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.img {
  height: 75%;
  margin: 0 10px;
}
.title {
  font-size: 15px;
  font-weight: 700;
  color: white;
  white-space: normal;
}
</style>
